<template>
    <custom-page-box>
        <div class="service-manage-container">
            <!--            <a-tabs default-active-key="1">
                <a-tab-pane key="1" tab="已发布的服务报价"></a-tab-pane>
            </a-tabs>-->
            <div class="title">已发布的服务报价</div>
            <div class="search-box">
                <a-form-model layout="inline" :model="form" ref="ruleForm">
                    <a-form-model-item label="类目" prop="type" class="form-type">
                        <a-cascader
                            v-model="form.type"
                            :options="treeData"
                            :field-names="{ label: 'name', value: 'id', children: 'children' }"
                            change-on-select
                            placeholder="请选择类目"
                        />
                    </a-form-model-item>
                    <a-form-model-item label="价格" prop="amount" class="form-amount">
                        <a-input-number
                            v-model="form.minAmount"
                            :max="99999999999"
                            :formatter="(value) => `${value}`.replace(/\B(?=(\d{ 3})+(?!\d))/g, ',')"
                            :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
                        />
                        <span class="line">-</span>
                        <a-input-number
                            v-model="form.maxAmount"
                            :max="99999999999"
                            :formatter="(value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                            :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
                        />
                    </a-form-model-item>
                    <a-form-model-item label="状态" prop="status" class="form-status">
                        <a-select v-model="form.status">
                            <a-select-option :value="0">全部</a-select-option>
                            <a-select-option :value="4">已上架</a-select-option>
                            <a-select-option :value="5">已下架</a-select-option>
                            <a-select-option :value="2">未通过审核</a-select-option>
                            <a-select-option :value="1">审核中</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="关键词" prop="keyword" class="form-keyword">
                        <a-input v-model="form.keyword" placeholder="输入服务报价标题进行搜索"></a-input>
                    </a-form-model-item>
                    <a-form-model-item class="btn">
                        <a-button @click="searchTable('reset')">重置</a-button>
                        <a-button type="primary" @click="searchTable">查询</a-button>
                        <a-button type="primary" @click="toAdd">发布服务报价</a-button>
                    </a-form-model-item>
                </a-form-model>
            </div>
            <div class="table">
                <a-table
                    :data-source="tableData"
                    rowKey="id"
                    :pagination="false"
                    :row-selection="{
                        selectedRows: selectedRows,
                        selectedRowKeys: selectedRowKeys,
                        onChange: onSelectChange
                    }"
                    :scroll="{ x: width, y: height }"
                >
                    <a-table-column key="x" title="序号" width="60px">
                        <template slot-scope="text, record, index">
                            <span>{{ (pageIndex - 1) * pageSize + index + 1 }}</span>
                        </template>
                    </a-table-column>
                    <a-table-column title="服务报价标题" data-index="title" width="100px" :ellipsis="true">
                        <template slot-scope="text, record">
                            <a-button type="link">
                                <nuxt-link
                                    target="_self"
                                    :to="{
                                        name: 'service-manage-id',
                                        params: { id: record.id }
                                    }"
                                >
                                    {{ record.title }}
                                </nuxt-link>
                            </a-button>
                        </template>
                    </a-table-column>
                    <a-table-column key="price" title="服务报价" data-index="price" width="80px" :ellipsis="true">
                        <template slot-scope="text, record">
                            <span v-if="record.price && record.unit">{{ record.price }}元/{{ record.unit }}</span>
                            <span v-if="!record.price && record.unit">咨询获取报价</span>
                            <span v-if="record.price && !record.unit">{{ record.price }}元</span>
                            <span v-if="!record.price && !record.unit">咨询获取报价</span>
                        </template>
                    </a-table-column>
                    <a-table-column key="status" title="状态" data-index="status" width="80px" :ellipsis="true">
                        <template slot-scope="text, record">
                            <span
                                :class="{
                                    'orange-txt': record.status === 1,
                                    'red-txt': record.status === 2,
                                    'green-txt': record.status === 3 || record.status === 4
                                }"
                            >{{ record.status | getStatus }}</span>
                        </template>
                    </a-table-column>
                    <a-table-column
                        key="serviceKind"
                        title="服务报价类目"
                        data-index="serviceKind"
                        width="100px"
                        :ellipsis="true"
                    />
                    <a-table-column
                        key="createTime"
                        title="发布时间"
                        data-index="createTime"
                        width="150px"
                        :ellipsis="true"
                    />
                    <a-table-column
                        key="updateTime"
                        title="修改时间"
                        data-index="updateTime"
                        width="150px"
                        :ellipsis="true"
                    />
                    <a-table-column key="c" title="操作" width="180px">
                        <template slot-scope="text">
                            <a-button class="green" v-if="[2, 5].includes(text.status)" @click="toEdit(text)">
                                编辑
                            </a-button>
                            <a-button class="green" v-if="[3, 5].includes(text.status)" @click="toPutOn(text)">
                                上架
                            </a-button>
                            <a-button class="orange" v-if="text.status === 4" @click="toPutDown(text)">下架</a-button>
                            <a-button class="red" v-if="[2, 3, 5].includes(text.status)" @click="toDelete(text)">
                                删除
                            </a-button>
                        </template>
                    </a-table-column>
                </a-table>
            </div>
        </div>
        <custom-pagination :total="Number(total)" :page.sync="pageIndex" :limit.sync="pageSize" @pagination="getTable">
            <div class="pagination-tool">
                <p class="page-tips">
                    已选<span class="num">{{ selectedRows.length }}</span>条
                </p>
                <a-button class="page-btn" @click="toPutDown()" :disabled="disableDown">下架</a-button>
                <a-button class="page-btn" @click="toPutOn()" :disabled="disableUp">上架</a-button>
                <a-button class="page-btn" @click="toDelete()" :disabled="disableDelete">删除服务</a-button>
            </div>
        </custom-pagination>
    </custom-page-box>
</template>

<script>
export default {
    name: 'ServiceManage',
    filters: {
        getStatus (val) {
            switch (val) {
            case 1:
                return '审核中'
            case 2:
                return '未通过审核'
            case 3:
                return '已上架'
            case 4:
                return '已上架'
            case 5:
                return '已下架'
            }
        }
    },
    beforeRouteEnter (to, from, next) {
        next(async (vm) => {
            const falg = await vm.getCompanyInfo()
            if (!falg) {
                vm.$confirm({
                    title: '提示',
                    content: '请先完善公司资料',
                    okText: '好的',
                    okType: 'primary',
                    onOk () {
                        vm.$router.replace('/company-manage/company-info')
                    },
                    onCancel () {
                        vm.$router.replace(from.path)
                    }
                })
            }
        })
    },
    data () {
        return {
            form: {
                type: [],
                minAmount: '',
                maxAmount: '',
                minSales: '',
                maxSales: '',
                status: 0,
                keyword: ''
            },
            treeData: [],
            total: 0,
            pageIndex: 1,
            pageSize: 10,
            tableData: [],
            selectedRows: [],
            selectedRowKeys: [],
            width: 1000,
            height: 500
        }
    },
    computed: {
        disableUp () {
            if (!this.selectedRows.length) return true
            const arr = this.selectedRows.filter(item => ![3, 5].includes(item.status))
            return !!arr.length
        },
        disableDown () {
            if (!this.selectedRows.length) return true
            const arr = this.selectedRows.filter(item => ![4].includes(item.status))
            return !!arr.length
        },
        disableDelete () {
            if (!this.selectedRows.length) return true
            const arr = this.selectedRows.filter(item => ![2, 3, 5].includes(item.status))
            return !!arr.length
        }
    },
    created () {
        this.getTree()
        this.getTable()
    },
    mounted () {
        const arr = document.getElementsByClassName('table')
        if (arr[0]) {
            this.width = arr[0].offsetWidth - 17
            this.height = arr[0].offsetHeight - 59 + 17
        }
    },
    methods: {
        async getCompanyInfo () {
            const res = await this.$ApiServer['company/mange/detail']()
            if (res.code === 200) {
                if (res.data.logo) {
                    return true
                } else {
                    return false
                }
            }
        },
        checkInput (val, name) {
            this.form[name] = val.replace(/[^\d{1,}.\d{1,}|\d{1,}]/g, '')
        },
        searchTable (type) {
            if (type === 'reset') {
                this.$refs.ruleForm.resetFields()
                this.form.minAmount = ''
                this.form.maxAmount = ''
                this.form.minSales = ''
                this.form.maxSales = ''
            }
            this.pageIndex = 1
            this.getTable()
        },
        async getTable () {
            const { type, minAmount, maxAmount, minSales, maxSales, status, keyword } = this.form
            const res = await this.$ApiServer['service/getTable']({
                currentPage: this.pageIndex,
                pageSize: this.pageSize,
                serviceKindId: type && type.length ? type[type.length - 1] : '',
                minPrice: minAmount,
                maxPrice: maxAmount,
                minSales,
                maxSales,
                status: status || '',
                keyWord: keyword
            })
            if (res.code === 200) {
                this.tableData = res.data.records || []
                this.total = res.data.total
                this.selectedRows = []
                this.selectedRowKeys = []
            } else {
                this.$message.error(res.message)
            }
        },
        async getTree () {
            const res = await this.$ApiServer['operationConfig/getTree']()
            if (res.code === 200) {
                const add = (list) => {
                    list.forEach((item) => {
                        item.scopedSlots = { title: 'custom' }
                        if (item.children && item.children.length) {
                            item.children = add(item.children)
                        } else {
                            item.children = []
                        }
                    })
                    return list
                }
                this.treeData = add(res.data)
                const filterStatus = (list) => {
                    return list.filter((item) => {
                        if (item.children) {
                            item.children = filterStatus(item.children)
                        }
                        return item.status
                    })
                }
                this.treeData = filterStatus(this.treeData)
            } else {
                this.$message.error(res.message)
            }
        },
        toAdd () {
            this.$router.push('/service-manage/update')
        },
        onSelectChange (selectedRowKeys, selectedRows) {
            this.selectedRowKeys = selectedRowKeys
            this.selectedRows = selectedRows
        },
        toEdit (row, type) {
            this.$router.push({
                path: '/service-manage/update',
                query: {
                    id: row.id,
                    detail: type,
                    status: row.status
                }
            })
        },
        toPutOn (row) {
            const content = row ? '确认是否上架服务[' + row.title + ']' : '确认是否上架选中服务'
            this.$confirm({
                title: '提示',
                content,
                okText: '确认',
                cancelText: '取消',
                onOk: async () => {
                    const res = await this.$ApiServer['service/putOn'](
                        row ? [row.id] : this.selectedRows.map(item => item.id)
                    )
                    if (res.code === 200) {
                        this.getTable()
                        this.$message.success(res.message)
                    } else {
                        this.$message.error(res.message)
                    }
                },
                onCancel () {}
            })
        },
        toPutDown (row) {
            const content = row ? '确认是否下架服务[' + row.title + ']' : '确认是否下架选中服务'
            this.$confirm({
                title: '提示',
                content,
                okText: '确认',
                cancelText: '取消',
                onOk: async () => {
                    const res = await this.$ApiServer['service/putDown'](
                        row ? [row.id] : this.selectedRows.map(item => item.id)
                    )
                    if (res.code === 200) {
                        this.getTable()
                        this.$message.success(res.message)
                    } else {
                        this.$message.error(res.message)
                    }
                },
                onCancel () {}
            })
        },
        toDelete (row) {
            const content = row ? '确认是否删除服务[' + row.title + ']' : '确认是否删除选中服务'
            this.$confirm({
                title: '提示',
                content,
                okText: '确认',
                cancelText: '取消',
                onOk: async () => {
                    const res = await this.$ApiServer['service/delete'](
                        row ? [row.id] : this.selectedRows.map(item => item.id)
                    )
                    if (res.code === 200) {
                        this.getTable()
                        this.$message.success(res.message)
                    } else {
                        this.$message.error(res.message)
                    }
                },
                onCancel () {}
            })
        }
    }
}
</script>

<style scoped lang="less">
.service-manage-container {
    background-color: #fff;
    overflow: hidden;
    border-radius: 6px;
    ::v-deep {
        .ant-tabs {
            background: #fff;
            margin-bottom: 10px;
            padding-left: 20px;
            border-radius: 4px;
        }
        .ant-tabs-bar {
            border-bottom: 2px solid transparent;
            margin-bottom: 0;
        }
        .ant-tabs-nav-scroll,
        .ant-tabs-nav-wrap,
        .ant-tabs-nav-container {
            overflow: unset;
        }
        .ant-tabs-tab {
            margin-right: 0;
            text-align: center;
            font-size: 14px;
            line-height: 25px;
            padding: 18px 0;
            color: #666666;
            &.ant-tabs-tab-active {
                color: #fd5454;
            }
        }
        .ant-tabs-ink-bar {
            bottom: 0;
            width: 80px !important;
            margin: 0 2px;
            background: #fd5454;
        }
        .ant-form-item {
            margin-bottom: 14px;
        }
        .ant-form-item-label {
            font-size: 16px;
            font-weight: 400;
            color: #333333;
        }
    }
    .search-box {
        background: #fff;
        border-radius: 4px;
        padding: 12px 20px 0;
        .form-type {
            ::v-deep {
                .ant-input {
                    width: 300px;
                }
            }
        }
        .form-amount,
        .form-sales {
            ::v-deep {
                .ant-input-number-input {
                    width: 80px;
                }
                .ant-form-item-children {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    height: 40px;
                    padding-top: 2px;
                }
            }
            .line {
                display: inline-block;
                line-height: 32px;
                padding: 0 4px;
            }
        }
        .form-status {
            ::v-deep {
                .ant-select {
                    width: 150px;
                }
            }
        }
        .form-keyword {
            ::v-deep {
                .ant-input {
                    width: 240px;
                }
            }
        }
        .btn {
            button {
                width: 80px;
                margin-right: 20px;
                &:last-child {
                    width: 120px;
                }
            }
        }
    }
    .table {
        margin-bottom: 10px;
        background: #fff;
        height: calc(100vh - 60px - 10px - 53px - 120px - 20px - 60px);
        padding: 0 10px;
    }
    .title {
        font-size: 16px;
        font-weight: 400;
        color: #2a2a2a;
        padding: 18px 20px 10px;
        border-bottom: 1px solid #f3f3f3;
    }
}
::v-deep .pagination {
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    .page-tips {
        color: #999999;
        margin-right: 40px;
    }
    .page-btn {
        width: 100px;
        height: 36px;
        line-height: 36px;
        background: #ffffff;
        border: 1px solid #666666;
        border-radius: 2px;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        &:first-of-type {
            margin-left: 0 !important;
            position: relative;
            &:before {
                content: '';
                display: block;
                width: 1px;
                height: 40px;
                background-color: #f3f3f3;
                position: absolute;
                left: -20px;
            }
        }
    }
}
</style>
